<template>
  <div>
    <div class="header-fixed">
      <Header :text="text">
      <!-- 筛选条件 -->
      <section style="width: 100%">
          <div class="left">
            <div style="width: 80%">
              <el-input v-model="formLabelAlign.shipmentNumber" :placeholder="`${$t('m.please')+$t('cExport.packing')}`" size="mini">
                <el-button slot="append" icon="el-icon-search" @click="handleOk"></el-button>
              </el-input>
            </div>
          </div>
          <div class="right" @click="handleChoose">
            <span>{{$t('m.screen')}}<van-icon name="filter-o" /></span>
          </div>
      </section>
      </Header>
    </div>
    <!-- 右侧弹框 -->
    <van-popup v-model="show" position="right" @click-overlay="close" :style="{ width: '80%',height: '100%'}">
      <div class="top">
        <header>{{$t('m.screen')}}</header>
      </div>
      <div class="content">
        <div class="content-text">
          <el-form label-position="top" label-width="80px" :model="formLabelAlign" size="mini">
            <el-form-item :label="$t('cExport.transportState')">
              <!-- <el-button @click="handleSelectState" type="primary">{{btnText}}</el-button> -->
               <el-select v-model="formLabelAlign.status" :placeholder="$t('m.choose')">
                <el-option v-for="(item,index) in options" :key="index" :label="$t(item.label)" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('cExport.stateDate')">
              <el-button type="primary" round plain @click="handleStartDate">{{startDate}}</el-button>
              <span style="padding: 0 2.778vw">~</span>
              <el-button type="warning" round plain @click="handleEndDate">{{endDate}}</el-button>
            </el-form-item>
            <el-form-item :label="$t('cExport.customs')">
              <el-select v-model="selected.declareStatus" :placeholder="$t('m.choose')">
                <el-option v-for="(item,index) in declare" :key="index" :label="$t(item.label)" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('cExport.company')">
              <el-select v-model="formLabelAlign.purchaser" :placeholder="$t('m.choose')">
                <el-option v-for="(item,index) in company" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('cExport.agent')">
              <el-select v-model="formLabelAlign.agentCode" :placeholder="$t('m.choose')">
                <el-option v-for="(item,index) in agent" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
             <el-form-item :label="$t('cExport.contract')">
              <el-input v-model="formLabelAlign.contractNo"></el-input>
            </el-form-item>
            <el-form-item :label="$t('cExport.port')">
              <el-input v-model="formLabelAlign.destinationHarbor"></el-input>
            </el-form-item>
            <el-form-item :label="$t('cExport.waybill')">
              <el-input v-model="formLabelAlign.mainWaybillNumber"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="bottom">
        <div>
          <el-button plain @click="close(1)">{{$t('btn.reset')}}</el-button>
          <el-button type="primary" @click="handleOk">{{$t('btn.ok')}}</el-button>
        </div>
      </div>
    </van-popup>
    <Scroll
        class="scroll-content"
        ref="scroll"
        @pulling="loadMore"
        @pullDown="handleDown"
    >
      <TransportDetail
          :key="index"
          :transObj="item"
          :class="item.aog === 'AOG' ? 'backColor':''"
          :index="index"
          @click.native="handleDetail(item, index)"
          v-for="(item,index) in list"
          v-animation
      >
      </TransportDetail>
      <div class="bottom-text" v-if="showBottom">-----{{$t('m.last')}}-----</div>
    </Scroll>
    <!-- 日期选择框 -->
    <div class="time" v-if="dateShow">
     <van-datetime-picker
        v-model="currentDate"
        type="date"
        :title="$t('m.chooseDate')"
        @confirm="confirm"
        @cancel="cancel"
      />
    </div>
  </div>
</template>

<script>
import Header from '../../components/common/Header'
import TransportDetail from '../../components/common/export/TransportDetail'
import Scroll from "@/components/common/scroll/Scroll"
import { format,exportState,declare } from "@/assets/js/common"
import { $export } from "@/api/export"

export default {
  components: {
    Header,
    TransportDetail,
    Scroll
  },
  data() {
    return {
      text: '',
      show: false, // 控制右侧弹框
      options: exportState,
      formLabelAlign: {
        page: 0,
        limit: 10,
        status: 0
        // shipmentNumber: '', // 装箱单号
        // contractNo: '', // 合同号
        // destinationHarbor: '', // 目的港|国
        // mainWaybillNumber: '', // 运单号
        // startDate: '',
        // endDate: '',
        // warning: [], // 被选中的预警
        // declareStatus: [], // 报关状态
        // purchaser: [], // 单位
        // transportAgent: [], // 运输代理
      },
      selected: {
        declareStatus: 0
      },
      dateShow: false,
      stateShow: false,
      startDate: 'Start',
      endDate: 'End',
      currentDate: new Date(),
      start: '',
      end: '',
      index: 1,
      warn: ['正常','运输超时'], // 预警
      declare,
      company: ['CAN','CIA','PLA','GHK','SDC','CCCD','IGI','CTU','QAQ','BAIYU'],
      agent: [], // 运输代理
      list: [],
      loading: false,
      finished: false,
      modelName: '', // 弹框名称
      refreshing: false, // 控制下拉刷新
      downReshed: false,
      isBottom: false,
      status: 0,
      showBottom: false,
      totalCount: 0, // 总条数
      isRefresh: false // 记录刷新
    }
  },
  created() {
    this.text = this.$t(this.$route.query.type)
    this.getList()
    this.getFindCode()
  },
  async activated() {
    this.text = this.$t(this.$route.query.type)
    // 从菜单导航栏进来重新刷新
    this.text = this.$t(this.$route.query.type)
    if (this.isRefresh) {
      this.formLabelAlign.page = 0
      this.list = []
      await this.getList()
      this.$refs.scroll.scroll.scrollTo(0, 0)
      this.isRefresh = false
    }
    else {
      this.$refs.scroll.refresh()
    }
  },
  watch: {
    '$route' (val) {
      if (val.name === 'HomeWork') {
        this.isRefresh = true
        this.formLabelAlign = this.$options.data().formLabelAlign
      }
    }
  },
  methods: {
    // 筛选条件
    handleChoose() {
      this.show = true
    },
    handleStartDate() {
      this.dateShow = true
      this.index = 1
      if (this.startDate !== 'Start') {
        this.currentDate = this.start
      } else {
        this.currentDate = new Date()
      }
    },
    handleEndDate() {
      this.dateShow = true
      this.index = 2
      if (this.endDate !== 'End') {
        this.currentDate = this.end
      } else {
        this.currentDate = new Date()
      }
    },
    confirm() {
      if (this.index === 1) {
        this.startDate = format(this.currentDate)
        this.start = this.currentDate
        this.dateShow = false
      }
      if (this.index === 2) {
        this.endDate = format(this.currentDate)
        this.end = this.currentDate
        this.dateShow = false
      }
    },
    cancel() {
      this.dateShow = false
    },
    // 遮罩层关闭
    close(value) {
      if(value) {
        this.btnText = '全部'
        this.formLabelAlign = this.$options.data().formLabelAlign
        this.selected = this.$options.data().selected
        this.handleDown()
      }
      this.dateShow = false
      this.stateShow = false
      this.show = false
    },
    // 加载数据
    getList() {
      // if (this.list.length >= this.totalCount) return console.log('我也是有底线的')
      this.formLabelAlign.page = this.formLabelAlign.page + 1
      const obj = JSON.parse(JSON.stringify(this.formLabelAlign))
      if(obj.status === 0) delete obj.status
      $export.getByStatus(obj)
          .then(res => {
            if (res.status === 200) {
              this.totalCount = res.data.totalCount
              this.list.push(...res.data.list)
              this.totalCount === this.list.length ? this.showBottom = true : this.showBottom = false
            }
            else {
              this.$msg.fail(res.message || res.msg || '网络错误,请稍后再试')
            }
          })
          .catch(err => {
            this.$msg.fail(err.message || err.msg || '请求超时')
          })
          .finally(() => {
            this.$refs.scroll.finishPullUp()
            this.$refs.scroll.refresh()
          })
    },
    // 加载更多
    loadMore() {
      this.getList()
      this.$refs.scroll.refresh()
    },
    handleDetail(item, index) {
      // 为已经做过动画的标记 already 类
      const divs = document.querySelectorAll('.detail')
      for (let div of divs) {
        if ([...div.classList].indexOf('fadeInUp') !== -1) {
          div.classList.remove('fadeInUp')
          div.classList.add('already')
        }
      }

      this.$router.push({
        path: '/exportDetail',
        query: {
          type: `${this.$t('cExport.packing')}:`+item.shipmentNumber
        }
      })
    },
    // 下拉刷新
    handleDown() {
      this.list = []
      this.formLabelAlign.page = 1
      if(this.formLabelAlign.status === 0) delete this.formLabelAlign.status
      $export.getByStatus(this.formLabelAlign)
          .then(res => {
            if (res.status === 200) {
              this.list.push(...res.data.list)
              this.$msg.success(this.$t('m.succeeded'))
            }
            else {
              this.$msg.fail(res.message || res.msg || '网络错误,请稍后再试')
            }
          })
          .catch(err => this.$msg.fail(err.message || err.msg || '请求超时'))
          .finally(() => {
            this.$refs.scroll.refresh()
            this.$refs.scroll.finishPullDownRefresh()
          })
    },
    // 查询
    handleOk() {
      this.formLabelAlign.startDate = this.changeTime()[0]
      this.formLabelAlign.endDate = this.changeTime()[1]
      this.show = false
      if(this.selected.declareStatus != 0) {
        this.formLabelAlign.declareStatus = this.selected.declareStatus
      }
      else {
        delete this.formLabelAlign.declareStatus
      }
      this.list = []
      this.formLabelAlign.page = 0
      this.getList()
    },
    // 改变时间显示
    changeTime() {
      let startDate = ''
      let endDate = ''
      if (this.startDate !== 'Start') startDate = this.startDate + ' ' + '00:00:00'
      if (this.endDate !== 'End') endDate = this.endDate + ' ' + '23:59:59'
      return [startDate,endDate]
    },
    // 运输状态选择
    handleState(text) {
      if(text.length !== 2) {
        exportState.forEach(item => {
          if(item.label == text) {
            this.formLabelAlign.status = item.value
          }
        })
      }
      else {
        delete this.formLabelAlign.status
      }
      this.btnText = text
      this.stateShow = false
    },
    // 取消
    onCancel() {
      this.stateShow = false
    },
    // 获取运输代理
    getFindCode() {
      $export.findCode()
             .then(res => {
               res.page.forEach(item => this.agent.push(item.agentCode))
             })
             .catch(err => this.$msg.fail(err))
    }
  }
}
</script>

<style scoped>
.header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
}
section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.389vw 0;
  background-color:#639df5;
  font-size: 4.167vw;
  font-weight: 580;
}
.left {
  flex: 6;
  display: flex;
  justify-content: center;
  color: white;
}
.left span {
  display: flex;
  width: 25%;
  justify-content: center;
  align-items: center;
}
select {
  width: 60%;
}
.right {
  flex: 1;
}
.right span {
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16.056vw;
  border-radius: 1.389vw;
  font-weight: 500;
  height: 28px;
}
.top header {
  height: 13.889vw;
  padding-left: 2.778vw;
  font-size: 5vw;
  line-height: 13.889vw;
  font-weight: 600;
  border-bottom: 0.278vw solid #797979;
}
.content {
  display: flex;
  justify-content: center;
}
.content-text {
  width: 90%;
  height: calc(100vh - 27.778vw);
  overflow-x:hidden;
  overflow-y:scroll;
}
/deep/.el-form-item__label {
  padding-bottom: 0px;
}
/deep/.el-form-item {
  margin: 0;
  padding: 2.778vw 0;
  border-bottom: 1px dashed black;
}
/deep/.el-form-item__label {
  font-size: 3.889vw;
}
.bottom {
  position: absolute;
  width: 100%;
  height: 13.889vw;
  bottom: 0;
  left: 0;
  background-color: white;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.time {
  width: 100%;
  position: fixed;
  z-index: 9999;
  bottom: 0;
  left: 0;
}
/deep/.el-checkbox-button span {
  border-radius: 0 !important;
  margin: 1.389vw 0 0 1.389vw;
  border-left: 1px solid #DCDFE6;
  border-radius: 3px !important;
}
.bottom div {
  margin-right: 10px;
}
.backColor {
  background-color: rgba(255,165,0,.4) ;
}
/* better-scroll */
.scroll-content {
  position: absolute;
  top: 64px;
  left: 0;
  right: 0;
  height: calc(100vh - 72px);
  overflow: hidden;
}
/* 我也是有底线的 */
.bottom-text {
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(0,0,0,.3);
}
/deep/.el-select-dropdown{
  z-index: 999999999999999999999 !important;
}
/deep/.mu-input {
  margin-bottom: 0 !important;
}
/* 右侧弹框 */
/deep/.van-overlay {
  z-index: 1499 !important;
}
/deep/.van-popup {
  z-index: 1500 !important;
}
</style>
